<template>
  <div class="departments">
    <el-card class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label=" 组织构架 " name="first"> </el-tab-pane>
      </el-tabs>
      <!-- 内容构造 -->
      <div class="box">
        <!-- 头部 -->
        <treeTools :item="myborder" class="headDate"></treeTools>

        <!-- 内容 -->
        <el-tree :data="data" class="conten" default-expand-all>
          <treeTools
            :item="data"
            slot-scope="{ data }"
            @deletAPI="getData"
            @addShow="addShow"
            @editShow="editShow"
          ></treeTools>
        </el-tree>
      </div>
    </el-card>
    <dialogDate
      :dialogDat.sync="dateShow"
      @upDateData="upDateDat"
      @upDate="getData"
      :id="cuuerntID"
      ref="myaddDept"
    ></dialogDate>
  </div>
</template>

<script>
import { deptApi } from '@/api/departments'

export default {
  data () {
    return {
      myborder: {},
      activeName: 'first',
      data: [],
      isSHow: true,
      // 控制组件的显示与隐藏
      dateShow: false,
      cuuerntID: ''
    }
  },
  methods: {
    editShow (id) {
      this.$refs.myaddDept.getDeptDetail(id)
      this.dateShow = true
    },

    addShow (id) {
      this.dateShow = true
      this.cuuerntID = id
    },
    trunData (arr, pid) {
      let son = []
      arr.forEach(item => {
        if (item.pid === pid) {
          let num = this.trunData(arr, item.id)
          item.children = num
          son.push(item)
        }
      })
      return son
    },
    upDateDat () {
      this.dateShow = false
    },
    async getData () {
      let res = await deptApi()
      // console.log(res)
      this.data = this.trunData(res.data.depts, '')
      this.myborder = res.data.depts[0]
      this.myborder.manager = '管理员'
      this.myborder.isSHow = true
    }
  },
  created () {
    this.getData()
  },
  components: {
    treeTools: () => import('./components/tree-tools.vue'),
    dialogDate: () => import('./components/add-dept.vue')
  }
}
</script>

<style lang="scss">
.departments {
  .box-card {
    margin: 40px;
    padding: 40px;
  }
  .box {
    margin: 50px;
  }
  .headDate {
    line-height: 50px;
    margin-top: 20px;
    border-bottom: 1px solid #000;
  }
  .right {
    text-align: right;
    span {
      margin-left: 10px;
    }
  }
  .conten {
    width: 100%;
    margin-top: 20px;
  }
}
</style>
